<template>
  <van-nav-bar
    :class="{'green-header':$route.meta.greenHeader}"
    :border="false"
    fixed
  >
    <div slot="left" class="left-bar" :class="headerTransition" @click.prevent="pageBack">
      <!-- <van-icon name="arrow-left" class="left-icon" /> -->
      <svg-icon class="nav-icon" icon-class="xiangzuo" />
      <span>{{ title }}</span>
    </div>
    <div id="right-bar" slot="right" class="right-bar-box">
      <slot name="right" />
    </div>
  </van-nav-bar>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'NavBar',
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['direction']),
    headerTransition() {
      if (!this.direction) {
        return ''
      }
      return this.direction === 'forward'
        ? 'header-fade-in-right'
        : 'header-fade-in-left'
    },
    title() {
      return this.$route.meta.title
    }
  },
  mounted() {
    document.getElementById('left-bar').addEventListener('animationend', () => {
      document.getElementById('left-bar').className = 'left-bar'
    })
  },
  methods: {
    pageBack() {
      if (this.$route.query.isHome) {
        this.backOrigin()
        return
      }
      switch (this.$route.path) {
        case '/':
          this.backOrigin()
          break
        default:
          this.$router ? this.$router.back() : this.backOrigin()
          break
      }
    },
    backOrigin() {
      this.$nativeHandler('closeWeb', '')
    }
  }
}
</script>
<style lang="less" scoped>
.header-back-icon {
  width: 14px;
  vertical-align: -2px;
}

.van-nav-bar {
  background-color: @defualt-bg;
}

.van-nav-bar__left {
  top: 5px;
}

.van-nav-bar__title {
  font-size: 17px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.8);
}

.left-icon {
  color: #333;
  font-size: 24px;
}
.left-bar{
  display: flex;
  align-items: center;
}
.green-header{
  background-color: #12B9A3 !important;
  /deep/ .nav-icon{
    color: #fff;
  }
  /deep/ .van-nav-bar__title{
    color: #fff;
  }
}
</style>
